<template>
	<view class="card-view">
		<view class="name-text">辽宁中宇纵横融资租赁有限公司债权项目十期</view>
		<view class="desc-view">
			<!-- <view class="tag-view">存续中</view> -->
			<view class="desc-text">协议编号: TJSNZR(D)0000936</view>
		</view>

		<view class="card-content">
			<view class="cell-view">
				<view class="cell-item">
                    <view class="label-text">约定回报（年华）</view>
					<view class="value-text">9-9.9%</view>
				</view>
				<view class="cell-item">
                    <view class="label-text">出资金额(万元)</view>
					<view class="value-text" style="color: #1F0C00;">5000</view>
				</view>
				<view class="cell-item">
                    <view class="label-text">期限(月)</view>
					<view class="value-text" style="color: #1F0C00;">770</view>
				</view>
			</view>
			<view class="options-view">
				<view class="time-view">生效日期：2023.12.31</view>
				<view class="button-view">
					<view>查看详情</view>
					<i class="el-icon-arrow-right"></i>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.card-view {
		width: 100%;
		background: linear-gradient(180deg, #FFFAF9 0%, #FFFFFF 100%);
		border-radius: 8px;
		padding: 15px;
		padding-bottom: 0;
        border: 1px solid #E8DED6;

		.name-text {
			width: 100%;
			@extend .text-dot;
			font-weight: 600;
			font-size: 16px;
			color: #1F0C00;
		}

		.desc-view {
			width: 100%;
			@extend .row-start;
			margin-top: 4px;

			.tag-view {
				padding: 2px 7px;
				font-size: 11px;
				color: #FFFFFF;
				background: #FF453B;
				border-radius: 2px;
			}

			.desc-text {
				font-weight: 400;
				font-size: 13px;
				color: #69442E;
			}
		}

		.card-content {
			width: 100%;
			margin-top: 15px;
            border-top: 1px solid #E8DED6;

			.cell-view {
				width: 100%;
				@extend .row-between;
				padding: 0 12px;
				padding-top: 15px;

				.cell-item {
					.value-text {
						font-weight: 600;
						font-size: 20px;
						color: #FF453B;
					}

					.label-text {
                        font-weight: 400;
						font-size: 12px;
						color: #1F0C00;
					}
				}
			}

			.options-view {
				width: 100%;
				padding: 17px 12px;
				@extend .row-between;
				border-top: 1px solid #E8DED6;
				margin-top: 15px;

				.time-view {
					font-weight: 400;
                    font-size: 14px;
                    color: #B38569;
				}

				.button-view {
					padding: 4px 10px;
					@extend .row;
					height: 26px;
					background: #FF2615;
					border-radius: 13px;
					font-weight: 400;
					font-size: 12px;
					color: #FFFFFF;

					.el-icon-arrow-right {
						margin-top: 2px;
					}
				}
			}
		}

	}
</style>